<template>
  <div class="home">
    <!-- 搜索框组件 -->
    <!-- <van-search
  v-model="value"
  show-action
  label="地址"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search> -->
    <zj @chuanfuji="zj"></zj>

    <!--轮播图  -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :style="{ h: 900 }"
    >
      <div class="van-swipe__track">
        <van-swipe-item>
          <img src="@/assets/zchcss/lb1.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/zchcss/lb5.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/zchcss/lb3.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/zchcss/lb4.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/zchcss/lb2.jpg" alt="" />
        </van-swipe-item>
      </div>
    </van-swipe>

    <!-- 公告栏 -->
    <van-notice-bar
      left-icon="volume-o"
      text="我是吴荣光，理性追星，理性购买，鸿星尔克，吴亦不凡！     鸿星尔克 To be Number one...... 河南加油....."
      background="balck"
      delay="1"
      speed="50"
    />

    <!-- 九宫格 -->
    <van-grid :column-num="3" :boder="false">
      <van-grid-item v-for="(item, i) in arr" :key="i" to="/together">
        <img :src="arr[i].imgurl" alt="" />
        <div>{{ arr[i].text }}</div>
      </van-grid-item>
    </van-grid>

    <!-- 今日推荐 -->
    <div class="jrtj">
      <!-- animate__shakeX -->
      <div>今日推荐</div>
      <router-link :to="`/fenlei`">
        <div>更多内容>>></div>
      </router-link>
    </div>

    <!-- 文章栏目 -->
    <van-row>
      <div v-for="(item, i) of arrs" :key="i" :title="item">
        <router-link :to="`/articles?id=${item.id}`">
          <van-col span="12">
            <div class="xiaomi">
              <img :src="item.pic" />
              <p>编号:{{ item.id }}</p>
              <p>名字:{{ item.name }}</p>
            </div>
          </van-col>
        </router-link>
      </div>
    </van-row>

    <!-- 底边  下面的五个分类  可以改但是就是我们 还有就是要改五个 还有路由-->
    <xrzp-tabbar></xrzp-tabbar>
    <!-- 使用组件 -->
  </div>
</template>

<script>
import zj from "@/components/Header_bar/index.vue";
import { getSearch } from "@/apis/modules/home";

export default {
  name: "home",
  components: { zj },
  data() {
    return {
      // value: "",
      h: "180px",
      loading: false,
      finished: false,
      loading: false,
      finished: false,
      refreshing: false,
      immediate: false,
      counts: 2,
      arrs: [],
      arr: [
        { imgurl: require("@/assets/zchcss/chihuo.png"), text: "吃货达人" },
        {
          imgurl: require("@/assets/zchcss/shengqian.png"),
          text: "省钱攻略",
        },
        { imgurl: require("@/assets/zchcss/happy.png"), text: "开心一刻" },
        { imgurl: require("@/assets/zchcss/yizhou.png"), text: "一周最热" },
        { imgurl: require("@/assets/zchcss/tijian.png"), text: "体检报告" },
        {
          imgurl: require("@/assets/zchcss/huiyuan.png"),
          text: "会员专属",
        },
      ],
      // list:[]
    };
  },
  methods: {
    zj(val) {
      // this.axios
      //   .get(`/recipe/search?keyword=${val}&num=20&appkey=5a432523cf279ce2`)
      //   .then((res) => {
      //     this.arrs = res.data.result.list;
      //   });
      (async () => {
        const arr = await getSearch(val);
        // console.log(arr.data.result.list);
        this.arrs = arr.data.result.list;
      })();
    },

    open() {
      this.show = true;
    },
    onLoad() {
      //按发送请求
      // this.axios.get(`/recipe/byclass?classid=${this.counts}&start=10&num=12&appkey=5a432523cf279ce2`).then(res=>{
      //  this.arrss = res.data.result.list})
      // this.counts++
      // this.loading=false
    },
  },

  mounted() {
    //  console.log(window.screen.width)
    // console.log(window.screen.height)
    //通过公式 计算轮播图的应该设置的高度
    let picwidth = 690;
    let picheight = 180;
    let screenwidth = window.screen.width;
    let height = Math.floor((picheight * screenwidth) / picwidth) + "px";
    this.h = height;
    //按id搜索
    // this.axios
    //   .get("/recipe/search?keyword=稀饭&num=40&appkey=5a432523cf279ce2")
    //   .then((res) => {
    //     this.arrs = res.data.result.list;
    //   });

    this.zj("稀饭");

    //按类名搜素
    // this.axios
    //   .get(
    //     `/recipe/byclass?classid=${this.counts}&start=10&num=40&appkey=5a432523cf279ce2`
    //   )
    //   .then((res) => {
    //     this.arrss = res.data.result.list;
    //   });
  },
};
</script>

<style scoped>
.home {
  margin-bottom: 62px;
}

/* 搜索框样式 */
.van-search {
  background-color: #7bb7fd !important;
}

/* 轮播图样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

.my-swipe img {
  width: 100%;
  height: 180px;
}

.my-swipe .van-swipe__track {
  height: 180px;
}

/* 今日推荐 */
.jrtj {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  height: 20px;
}

/* 九宫格样式 */
.van-grid-item__content img {
  height: 30px;
  width: 30px;
}
/* 文字图片距离 */
.van-grid-item__content div {
  margin-top: 10px;
}
/* 文字样式 */
.van-grid {
  font-size: 12px;
  border: none;
}

.xiaomi {
  border-radius: 20px;
  padding: 5px;
}

.xiaomi img {
  border-radius: 20px;
  width: 100%;
}

.xiaomi p {
  font-size: 13px;
  height: 20px;
  overflow: hidden;
  color: #666;
}
</style>
